<template>
  <el-dialog v-model="dialogVisible" :title="htmlTitle" width="360px">
    <el-form ref="refCoupletModifyDialog" :model="form" :rules="rules" class="demo-ruleForm" status-icon>
      <el-form-item :label="htmlLabelName" label-width="100px" prop="reply_content">
        <el-input v-model="form.reply_content" style="width: 180px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ htmlBtnCancel }}</el-button>
        <el-button type="primary" @click="save">{{ htmlBtnConfirm }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'CoupletModify',
  data() {
    return {
      dialogVisible: false,
      htmlTitle: chrome.i18n.getMessage('coupletModifyDialogTitle'),
      htmlLabelName: chrome.i18n.getMessage('coupletNextLabelName'),
      htmlBtnCancel: chrome.i18n.getMessage('commonBtnCancel'),
      htmlBtnConfirm: chrome.i18n.getMessage('commonBtnConfirm'),
      form: {
        reply_content: ''
      },
      rules: {
        reply_content: [
          { required: true, message: chrome.i18n.getMessage('coupletContentLabelInput'), trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    /**
     * 显示对话框.
     * @param data
     */
    show(data) {
      this.form = Object.assign({}, data)
      this.dialogVisible = true
    },

    /**
     * 保存.
     */
    save() {
      this.$refs.refCoupletModifyDialog.validate(valid => {
        if (valid) {
          this.$emit('confirm', Object.assign({}, this.form))
          this.dialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>